<template>
  <div class="header">
    <!-- 侧边栏切换按钮 -->
    <div class="toggle-button" @click="toggleSidebar">
      <el-icon :size="20">
        <Expand v-if="props.isCollapse" />
        <Fold v-else />
      </el-icon>
    </div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item
        v-for="(item, index) in breadcrumbs"
        :key="index"
        :to="item.path"
      >
        {{ item.title }}
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="header-right">
      <el-tooltip content="全屏" placement="bottom">
        <el-button
          :icon="isFullscreen ? 'FullScreen' : 'Rank'"
          circle
          @click="toggleFullScreen"
        ></el-button>
      </el-tooltip>
      <!-- 新增刷新按钮 -->
      <el-tooltip content="刷新" placement="bottom">
        <el-button icon="Refresh" circle @click="refreshPage"></el-button>
      </el-tooltip>
      <el-tooltip
        :content="isEnglish ? '切换到中文' : 'Switch to English'"
        placement="bottom"
      >
        <el-button
          :icon="isEnglish ? 'Document' : 'Collection'"
          circle
          @click="toggleLanguage"
        ></el-button>
      </el-tooltip>
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          <el-avatar :size="32" :src="avatarUrl"></el-avatar>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="profile">个人信息</el-dropdown-item>
            <el-dropdown-item command="logout">出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, defineProps, defineEmits } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import {
  FullScreen,
  Rank,
  Document,
  Collection,
  Refresh,
  Expand,
  Fold,
} from "@element-plus/icons-vue";

const route = useRoute();
const router = useRouter();
const breadcrumbs = ref([]);
const isFullscreen = ref(false);
const isEnglish = ref(false);
const avatarUrl = ref(
  "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
); // 替换为实际的头像URL
const isCollapse = ref(false);

const generateBreadcrumbs = (route) => {
  const breadcrumbs = [];
  if (route.matched && route.matched.length > 0) {
    route.matched.forEach((record) => {
      if (record.meta && record.meta.title) {
        breadcrumbs.push({
          path: record.path,
          title: record.meta.title,
        });
      }
    });
  }
  return breadcrumbs;
};

watch(
  () => route.path,
  (newPath) => {
    breadcrumbs.value = generateBreadcrumbs(route);
  },
  { immediate: true }
);

const toggleFullScreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
    isFullscreen.value = true;
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
      isFullscreen.value = false;
    }
  }
};

const toggleLanguage = () => {
  isEnglish.value = !isEnglish.value;
  // 这里可以添加切换语言的逻辑
  ElMessage.success(isEnglish.value ? "Switched to English" : "已切换到中文");
};

const handleCommand = (command) => {
  if (command === "profile") {
    router.push("/profile");
  } else if (command === "logout") {
    // 退出登录逻辑
    localStorage.removeItem("token");
    router.push("/login");
    ElMessage.success("已退出登录");
  }
};

const refreshPage = () => {
  router.push({
    path: route.path,
    query: { ...route.query, refresh: new Date().getTime() },
  });
};

const props = defineProps({
  isCollapse: Boolean,
});

const emit = defineEmits(["update:isCollapse"]);

const toggleSidebar = () => {
  emit("update:isCollapse", !props.isCollapse);
};
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  padding: 0 20px;
  justify-content: space-between;
  height: 100%;
}

.toggle-button {
  margin-right: 5px; /* 调整此值以靠近侧边栏 */
  cursor: pointer;
  display: flex;
  align-items: center;
}

.el-breadcrumb {
  flex-grow: 1;
}

.header-right {
  display: flex;
  align-items: center;
}

.header-right > * {
  margin-left: 15px;
}

.el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
}
</style>
